<template>
	<div class="uploadWrap">
		<h3>回单信息</h3>
		<ul>
			<li>
				<span>回单吨位</span>
				<input type="text" placeholder="0.000"   v-model="actDispatchWeight"  />
			</li>
			<li>
				<span>回单件数</span>                
				<input type="text" placeholder="0"  v-model="actDispatchCount">
			</li>
			<li>
				<span>实时杂费</span>
				<input type="text" placeholder="0.00"  v-model="otherFee">
			</li>
		</ul>
		<h3>装卸货上传</h3>
		<ul class="imgGroup clearfix">
			<li class="add" @click='getUploadPictures(30)'>+</li>
			<li v-for="(item, index) in stevedores" >
				<img class="wc-preview-img"  :src="item.attachmentUrl" @click="appShowImg($event, imgStevedores,index)">
				<div class="dele" @click='removeData(stevedores,item,index,1)'>×</div>
			</li>
		</ul>
		<h3>签收单上传</h3>
		<ul class="imgGroup clearfix">
			<li class="add" @click='getUploadPictures(10)'>+</li>
			<li  v-for="(item, index) in attachment" >
				<img class="wc-preview-img"  :src="item.attachmentUrl" alt="" @click="appShowImg($event, imgAttachment,index)">
				<div class="dele" @click='removeData(attachment,item,index,2)'>×</div>
			</li>
		</ul>
		<h3>杂费发票上传</h3>
		<ul class="imgGroup clearfix">
			<li class="add" @click='getUploadPictures(20)'>+</li>
			<li v-for="(item, index) in attachmentInvoice">
				<img class="wc-preview-img"  :src="item.attachmentUrl" @click="appShowImg($event, imgInvoice,index)" >
				<div class="dele" @click='removeData(attachmentInvoice,item,index,3)'>×</div>
			</li>
		</ul>
		<a href="javascript:;" class="sureUp" @click='saveReceipt'>确认上传</a>
	</div>
</template>
<script type="text/ecmascript-6">
	import ApiService from '@/services/API-servies'
	import { MessageBox } from 'mint-ui'
	export default{
		data(){
			return{
				attachmentInfo : {
		            attachmentId:'',
		            attachmentUrl:''
		        },
				dispatchId:'',
				actDispatchWeight:'',
				actDispatchCount:'',
				otherFee:'',
				attachment:[],
				attachmentInvoice:[],
				stevedores:[],
				type:'',
				removeId:[],
				res:'',
				imgStevedores:[],
        		imgInvoice:[],
        		imgAttachment:[],

			}
		},
		created: function (){
			// this.setSession();
			window.getUploadPictures = this.getUploadPictures;
			window.setUploadPictures = this.setUploadPictures;
			this.getUpload();
		},
		mounted(){
			this.getReceipt();
		    setTimeout(() => {
		        if(this.$isBrower.isAndroid){
		        }else if(this.$isBrower.isIos){
		            this.setIosTitleType();
		        }
		    }, 0)
		},
		methods:{
			getUploadPictures(type){
				this.type = type;
				if(this.$isBrower.isAndroid){
					app.getUploadPictures(this.dispatchId,6);
				}else if(this.$isBrower.isIos){
                    this.toUpload();
                }
				
			},
			setUploadPictures(res){
				this.res = res;
				for (var i = res.length - 1; i >= 0; i--) {
					var _attachment = {
						attachmentId:'',
		            	attachmentUrl:''
					}
					_attachment.attachmentUrl=res[i];
					if(this.type == 30){
						this.stevedores.push(_attachment);
						this.imgStevedores.push(_attachment.attachmentUrl);
					}
					if(this.type == 20){
						this.attachmentInvoice.push(_attachment);
						this.imgInvoice.push(_attachment.attachmentUrl);
					}
					if(this.type == 10){
						this.attachment.push(_attachment);
						this.imgAttachment.push(_attachment.attachmentUrl);
					}
					
				}
			},
			toUpload(){
		        let params = this.dispatchId+"-"+6;
		        this.$bridge.callhandler('ToUpload', params, (data) => {
		          // 处理返回数据
		         // this.callhandler = data
		        })
		      },
	      	getUpload(){
	        	this.$bridge.registerhandler('GetUpload', (data) => {
		          	this.res = data;
					for (var i = data.length - 1; i >= 0; i--) {
						let _attachment = {
							attachmentId:'',
			            	attachmentUrl:''
						}
						_attachment.attachmentUrl=data[i];
						if(this.type == 30){
							this.stevedores.push(_attachment);
							this.imgStevedores.push(_attachment.attachmentUrl);
						}else if(this.type == 20){
							this.attachmentInvoice.push(_attachment);
							this.imgInvoice.push(_attachment.attachmentUrl);
						}else if(this.type == 10){
							this.attachment.push(_attachment);
							this.imgAttachment.push(_attachment.attachmentUrl);
						}
					}
		        })
	      	},
			getReceipt(){
				//let transBillId = this.$route.query.transBillId;
				let dispatchId = this.$route.query.dispatchId;
				this.dispatchId = dispatchId;
				ApiService.receipt.tspDispatchDetail({
					dispatchId:dispatchId
				}).then((res) =>{
	                if(res.meta.retCode != '0'){
	                    return ;
	                }
	                var _dispach = res.data;
	                if(_dispach.actDispatchWeight > 0){
	                	this.actDispatchWeight = (_dispach.actDispatchWeight*1).toFixed(3);
	                }else{
	                	if(_dispach.dispatchWeight > 0){
                        	this.actDispatchWeight = (_dispach.dispatchWeight*1).toFixed(3);
                    	}
	                }
	                if(_dispach.actDispatchCount > 0){
	                	this.actDispatchCount = _dispach.actDispatchCount;
	                }
	                if(_dispach.otherFee > 0){
	                	this.otherFee = (_dispach.otherFee*1).toFixed(2);
	                }
	                this.attachment = _dispach.attachment;
	                this.attachmentInvoice = _dispach.attachmentInvoice;
	                this.stevedores = _dispach.stevedores;

	                this.imgStevedores = [];
        			this.imgInvoice = [];
        			this.imgAttachment = [];

	                for (var i = this.attachment.length - 1; i >= 0; i--) {
	                	this.imgAttachment.push(this.attachment[i].attachmentUrl);
	                }
	                for (var i = this.attachmentInvoice.length - 1; i >= 0; i--) {
	                	this.imgInvoice.push(this.attachmentInvoice[i].attachmentUrl);
	                }
	                for (var i = this.stevedores.length - 1; i >= 0; i--) {
	                	this.imgStevedores.push(this.stevedores[i].attachmentUrl);
	                }
					
	            })
			},
			removeData(_array,_item,_index,val){
				if('' != _item.attachmentId){
					this.removeId.push(_item.attachmentId);
				}
				_array.splice(_index,1);
				if(val == 1){
					let _imgStevedores = this.imgStevedores;
					var index = _imgStevedores.indexOf(_item.attachmentUrl);
					if (index > -1) {
					    _imgStevedores.splice(index, 1);
					}
				}else if(val == 2){
					let _imgAttachment = this.imgAttachment;
					var index = _imgAttachment.indexOf(_item.attachmentUrl);
					if (index > -1) {
					    _imgAttachment.splice(index, 1);
					}
				}else{
					let _imgInvoice = this.imgInvoice;
					var index = _imgInvoice.indexOf(_item.attachmentUrl);
					if (index > -1) {
					    _imgInvoice.splice(index, 1);
					}
				}
				
			},saveReceipt(){
				/*var img = ["http://101.132.40.254/home/ftp/temp/DB17111538365/cb4ad4fc-e089-4536-8c1a-eabce18f760e.png","http://101.132.40.254/home/ftp/temp/DB17111538365/9b5ccf79-93b5-4642-8c90-15e4358cf0f3.png"];
				for (var i = img.length - 1; i >= 0; i--) {
					var _attachment = {
						attachmentId:'',
		            	attachmentUrl:''
					}
					_attachment.attachmentUrl=img[i];
					this.stevedores.push(_attachment);
				}*/
				
				ApiService.receipt.appUpload({
					dispatchId:this.dispatchId,
					dispatchWeight:this.actDispatchWeight == '' ? 0 : this.actDispatchWeight,
					dispatchCount:this.actDispatchCount == '' ? 0 : this.actDispatchCount ,
					otherFee:this.otherFee  == '' ? 0 : this.otherFee,
					attachment:JSON.stringify(this.attachment),
					attachmentInvoice:JSON.stringify(this.attachmentInvoice),
					stevedores:JSON.stringify(this.stevedores),
					removeId:JSON.stringify(this.removeId),
				}).then((res) =>{
	                if(res.meta.retCode != '0'){
	                	MessageBox('提示', '操作失败');
	                	//location.reload();
	                    return ;
	                }
	                MessageBox('提示', '上传成功').then(action => {
			          if (action == 'confirm') {
			            this.$router.push({path: 'receipt', query: { transBillId:this.$route.query.transBillId}})
			          }
			      	})
	                //this.getReceipt();

	            })
			},
			//ios 设置头部信息
          setIosTitleType(){
            let params = {
              isReturn: true,
              isSearch: false,
              isTitleSegment:false
            };
            this.$bridge.callhandler('needBarButton', params, (data) => {})
          },
          appShowImg($event,list,index){
            let params = {
                currentIndex:index,
                pickerList:list 
              };
            if(this.$isBrower.isIos){
              this.$bridge.callhandler('LookBigPictureAction', params, (data) => {})
            }
            if(this.$isBrower.isAndroid){
              app.showImg(params);
            }
          }
		},
		filters:{
			numberTo(val){
				return (val*1).toFixed(2);
			}
		},
		components:{}
	}
</script>
<style scoped lang="less" type="stylesheet/less">
	@import "~common/less/variable";
	@import "~common/less/modules/receiptUpload";

</style>

